<template>
  <div id="app" :style="{height: appHeight + 'px'}">
    <div :style="{height: routerHeight + 'px'}">
      <keep-alive :include="keepAliveComponents" :exclude="unKeepAliveCommponents">
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import { isIphoneX, isIOS } from '@/assets/js/brower'
import { on } from '@/assets/js/dom'
import axios from '@/api/axiosApi'
// import { localUser } from '@/assets/js/local'
import { mapMutations } from 'vuex'

export default {
  name: 'app',
  components: {
  },
  data () {
    return {
      statusBarColor: 'white',
      // 也可以用正则表达式
      keepAliveComponents: ['Home', 'Address', 'MeiTu', 'Cart', 'User', 'ChatAI', 'Ticketing'],
      unKeepAliveCommponents: []   // 貌似对子路由下面的组件不管用
    }
  },
  created () {
    // FIXME 默认禁用IOS侧滑返回
    this.appHeight = document.body.offsetHeight
    // this.appHeight = window.innerHeight
    if (isIphoneX()) {
      this.routerHeight = this.appHeight - 34
    } else {
      this.routerHeight = this.appHeight
    }
    this.$store.dispatch('initJIM')
    if (window.AMap) {
      AMap.plugin(['AMap.Scale', 'AMap.ToolBar'])
    } else {
      this.$vux.toast.text('网络异常，加载地图组件失败', 'middle')
    }
    on(window, 'touchmove', this.touchListener)
    on(window, 'touchstart', this.touchListener)
    // this.getWeChatList()
    this._getAddressList()
  },
  methods: {
    touchListener (e) {
      // 去除IOS 浏览器本身的回弹效果
      if (isIOS() && e._isScroller && !e._isScroller) {
        // 判断默认行为是否可以被禁用
        if (e.cancelable) {
          // 判断默认行为是否已经被禁用
          if (!e.defaultPrevented) {
            e.preventDefault()
          }
        }
      }
      // 去除网络加载时和better-scroll的滚动冲突
      if (document.getElementsByClassName('vux-loading').length > 0 && document.getElementsByClassName('vux-loading')[0].style.display !== 'none') {
        if (e.cancelable) {
          if (!e.defaultPrevented) {
            e.preventDefault()
          }
        }
      }
    },
    _getAddressList() {
      axios.get(this, `/v1/address/1`, {
        pageSize: 50
      }, (data) => {
        if (data && data.length > 0) {
          this.setAreaList(data)
        }
      })
    },
    ...mapMutations({
      setAreaList: 'SET_AREA_LIST'
    })
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

input, textarea {
  caret-color: #2e5bab
}
input::-webkit-input-placeholder { /* WebKit browsers */
    color:    #a9a9a9;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #a9a9a9;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #a9a9a9;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #a9a9a9;
}
// IOS底部样式统一
html, body {
  height: 100vh;
  background: #F7F7FA;
}
#app {
  background: #efefef;
  font-size: 16px;
  color: #333;
  font-family: huawenxihei, 'Microsoft YaHei', 'SimHei';
  overflow: hidden;
  // font-family: pingfangheiti_xianxi
}
ul {
  list-style: none
}
// Toast样式修改
.weui-toast__content {
  font-size: 14px;
}
// MessageBox样式修改
.weui-dialog {
  width: 65%;
}
.weui-dialog__title {
  font-size: 16px;
}
.weui-dialog__bd {
  min-height: 0;
}
.weui-dialog__ft {
  line-height: 40px;
}
.weui-dialog__btn {
  font-size: 14px;
}
// 图片预览样式修改
.pswp .pswp__top-bar {
  background: none;
  padding-top: 34px;
  height: 78px;
}
.pswp .pswp__button{
  background-color: rgba(0, 0, 0, 0.5);
}
.pswp .pswp__counter {
  top: 34px;
}
.pswp .pswp__top-bar .pswp__button--fs {
  display: none;
}

/* 字体定义 */
@font-face {
  font-family: huawenxihei;
  src: url('../static/css/huawenxihei.ttf');
}
</style>
